<template>
  <div class="admin-user-manage">
    <el-form label-position="left" label-width="70px">
      <el-row :gutter="5">
        <el-col :span="8">
          <el-form-item label="用户名：">
            <el-input v-model="param.username" placeholder="请选择"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="4">
          <el-button type="primary" @click="search">搜索</el-button>
        </el-col>
      </el-row>
    </el-form>
    <el-table :data="tableList" stripe>
      <el-table-column prop="id" label="id" min-width="40"></el-table-column>
      <el-table-column prop="username" label="用户名" min-width="80"></el-table-column>
      <el-table-column label="注册时间" min-width="100">
        <span slot-scope="scope">{{scope.row.createdAt | formatTime}}</span>
      </el-table-column>
      <el-table-column label="用户类型" min-width="120">
        <span slot-scope="scope">{{USER_TYPE[scope.row.permission]}}</span>
      </el-table-column>
      <el-table-column prop="level" label="用户等级" min-width="100"></el-table-column>
      <el-table-column label="操作" min-width="80">
        <template slot-scope="scope">
          <el-tooltip class="item" effect="dark" content="编辑" placement="bottom">
            <el-button
              @click="showModel(scope.row)"
              type="success"
              size="mini"
              icon="el-icon-edit"
              circle
            ></el-button>
          </el-tooltip>
        </template>
      </el-table-column>
    </el-table>
    <div class="tableFoot">
      <div class="paging">
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="param.pageNo"
          :page-size="param.pageSize"
          :page-sizes="[10,20,30,40,50,100]"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total"
        ></el-pagination>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "user-manage",
  components: {},
  props: {
    name: {
      type: String
    }
  },
  data() {
    return {
      USER_TYPE: this.$common.USER_TYPE,
      editForm: {},
      tableList: [],
      param: {
        pageNo: 1,
        pageSize: 10,
        username: ""
      },
      total: 0,
      showEdit: false
    };
  },
  computed: {},
  methods: {
    handleSizeChange(val) {
      this.param.pageSize = val;
      this.getTableData();
    },
    handleCurrentChange(val) {
      this.param.pageNo = val;
      this.getTableData();
    },
    search() {
      this.param.pageNo = 1;
      this.getTableData();
    },
    getTableData() {
      if (this.param.dateRange) {
        this.param.startDate = this.param.dateRange[0];
        this.param.endDate = this.param.dateRange[1];
      }
      this.$api.admin.getUserList(this.param).then(res => {
        this.tableList = res.data.list;
        this.total = res.data.total;
      });
    }
  },
  created() {
    this.getTableData();
  }
};
</script>

<style lang="scss" scoped>
.admin-user-manage {
}
</style>